<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 String//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>
      Map
    </title>
    <link rel="stylesheet" type="text/css" href="/omwpt/media/css/site.css" media="screen" />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAH1WdeNBi6WiOsCcQZnt46RRDVyhqbbtYZc3xd9jNid7-LbI2vBSqie6iUa2qOqJOrJVPGoyms8iGPg" type="text/javascript"></script>
    <script type="text/javascript" scr="http://www.json.org/json2.js">
    </script>
    <script type="text/javascript">
      var map;
      var points = new Array();
      var coordinates = new Array();

      var geocoder;
      var circle;
      var circleRadius = 100;
      var centerMarker;
      var optionSelected;

      function initialize()
      {
        if (GBrowserIsCompatible())
        {
          map = new GMap2(document.getElementById("map"));
          map.addControl(new google.maps.LargeMapControl());
          map.addControl(new GScaleControl());
          map.addMapType(G_PHYSICAL_MAP);
          map.addControl(new google.maps.MapTypeControl());
          map.setCenter(new google.maps.LatLng(35.913679, -79.055927), 13, G_NORMAL_MAP);
          map.enableScrollWheelZoom();


          GEvent.addListener(map, "click", function(overlay, point)
          {
            if (point)
            {
              option = getCheckedValue(document.formOption.object);
              if (option == "elev")
              {
                showElevation(point);
              }
              else
              {
                addOverlay(point);
              }
              //points[ points.length ] = point;
              //coordinates[ coordinates.length ] = [ point.lat(), point.lng() ];
              //redrawPath();

            }
            });
          }
        }

        // return the value of the radio button that is checked
        // return an empty string if none are checked, or
        // there are no radio buttons
        function getCheckedValue(radioObj) {
          if(!radioObj)
          return "";
          var radioLength = radioObj.length;
          if(radioLength == undefined)
          if(radioObj.checked)
          return radioObj.value;
          else
          return "";
          for(var i = 0; i < radioLength; i++) {
            if(radioObj[i].checked) {
              return radioObj[i].value;
            }
          }
          return "";
        }

        function showElevation(point)
        {
          var elev = getElev(point);
          document.getElementById('result').innerHTML =elev + "m";

        }

        function addOverlay(point)
        {
          drawCircle(map, point, .1, 15, '#FF0000');
          drawCircle(map, point, .2, 15, '#FF8040');
          drawCircle(map, point, .3, 15, '#FFFF00');
        }

        function drawCircle(map, center, radius, numPoints, color)
        {
          var poly = [] ;
          var line ;
          poly = [] ;
          var lat = center.lat() ;
          var lng = center.lng() ;
          var d2r = Math.PI/180 ;                // degrees to radians
          var r2d = 180/Math.PI ;                // radians to degrees
          var Clat = (radius/3963) * r2d ;      //  using 3963 as earth's radius
          var Clng = Clat/Math.cos(lat*d2r);
          //Add each point in the circle
          for (var i = 0 ; i < numPoints ; i++)
          {
            var theta = Math.PI * (i / (numPoints / 2)) ;
            Cx = lng + (Clng * Math.cos(theta)) ;
            Cy = lat + (Clat * Math.sin(theta)) ;
            var pointB = new GLatLng(Cy,Cx);
            poly.push(getDropOff(center, pointB, 5, 10)) ;

          }

          //Remove the old line if it exists
          if(line)
          {
            //map.removeOverlay(line) ;
          }
          //Add the first point to complete the circle
          poly.push(poly[0]) ;

          //Create a line with teh points from poly, red, 3 pixels wide, 80% opaque
          line = new GPolygon(poly, color, 3, 0.0, color, 0.15) ;
          map.addOverlay(line) ;
        }

        function getDropOff(pointA, pointB, numPoints, elevationChange)
        {
          var lat = (pointA.lat() - pointB.lat()) / numPoints;
          var lng = (pointA.lng() - pointB.lng()) / numPoints;

          var centerAltitude = getElev(pointA);
          var lastPoint = pointA;

          for (i=0; i<numPoints; i++)
          {
            var newPoint = new GLatLng( pointA.lat() - (lat*(i+1)), pointA.lng() - (lng*(i+1)) );

            var pointAltitude = getElev(newPoint);

            var elevDiff = pointAltitude - centerAltitude;
            if(elevDiff > elevationChange)
            {
              return lastPoint;
            }
            lastPoint = newPoint;
          }
          return pointB;
        }


        function getElev(point)
        {

          if (window.XMLHttpRequest)
          {
            xhttp=new XMLHttpRequest()
          }
          else
          {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP")
          }
          var query = "http://ws.geonames.org/srtm3XML?lat=" + point.lat() + "&lng=" + point.lng();
          xhttp.open("GET",query,false);
          xhttp.send("");
          xmlDoc=xhttp.responseXML;
					
          return xmlDoc.getElementsByTagName("srtm3")[0].childNodes[0].nodeValue;
        }
      </script>

    </head>
    <body onload="initialize()" onunload="GUnload()">
      <h1>
        Wireless Planning Tool
      </h1>

      <p>
        You can use your scroll wheel to zoom in and out of the map.
      </p>

      <table>

        <tr>
          <td>
            <div id="map" style="width: 600px; height: 400px">
            </div>
          </td>
          <td valign="top">
            <h3>

              Features
            </h3>

            <br>
            <form name="formOption">
              <input type="radio" class="radio" name="object" value="elev">
              Get Elevation Info
            </input>
            <br>
            <input type="radio" class="radio" name="object" value="icon">

            Place Icon
          </input>
        </form>
        <div id="result">

        </div>
        <br/>
        <div id="result2">

        </div>

      </td>
    </tr>
  </table>


</body>
</html>
